<template>
  <view class="page">
    <!-- 顶部个人信息卡片 -->
    <view class="header">
      <view class="user-card">
        <view class="user-info" @click="navigateToUserProfile">
          <image class="avatar" :src="headsculpture" @click.stop="previewImage" mode="aspectFill" lazy-load />
          <view class="info-content">
            <text class="nickname">{{nickname}}</text>
            <view class="stats">
              <view class="stat-item">
                <text class="stat-value">{{linknum}}</text>
                <text class="stat-label">已连接设备</text>
              </view>
              <view class="stat-divider"></view>
              <view class="stat-item">
                <text class="stat-value">{{workingnum}}</text>
                <text class="stat-label">正在工作设备</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 快捷功能区 -->
    <view class="quick-actions">
      <view class="action-item" v-for="(item, index) in quickActions" :key="index">
        <image class="action-icon" :src="item.icon" mode="aspectFit" />
        <text class="action-text">{{item.text}}</text>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="menu-list">
      <view class="menu-card">
        <view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="item.action">
          <view class="menu-content">
            <image class="menu-icon" :src="item.icon" mode="aspectFit" />
            <text class="menu-text">{{item.text}}</text>
          </view>
          <uni-icons type="right" size="14" color="#999" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  _getuserinfo
} from "@/service/user.js"
//获取用户绑定的设备列表(绑定加共享)
import {
  _getequiplistall
} from '@/service/equip.js'

export default {
  components: {},
  data() {
    return {
      nickname: '',
      account_user: '',
      password: '',
      // account:'',
      // password:''
      equips: [],
      linknum: 0,
      workingnum: 0,
      headsculpture: '',
      quickActions: [
        {
          icon: '../../static/images/wodechanpinjieshao.png',
          text: '产品介绍'
        },
        {
          icon: '../../static/images/wodechanpinshouce.png',
          text: '产品手册'
        },
        {
          icon: '../../static/images/wodegeren.png',
          text: '个人'
        }
      ],
      menuItems: [
        {
          icon: '../../static/images/ff54ca942c2de9448b6ba5568b92235b.png',
          text: '共享',
          action: () => this.clicklistitem1()
        },
        {
          icon: '../../static/images/6a8bc54002b8b10304408895a951cbd0.png',
          text: '我的设备',
          action: () => this.navTo('/pages/allequips/allequips')
        },
        {
          icon: '../../static/images/12b2a4b2b90714de56887df28bf66ffa.png',
          text: '实验记录',
          action: () => this.navTo('/pages/experhistory/experhistory')
        },
        {
          icon: '../../static/images/8f1bbff8f88a3ef98d3b6b53e2b31672.png',
          text: '帮助与反馈',
          action: () => this.navTo('/pages/feedback/feedback')
        },
        {
          icon: '../../static/images/1fccb7d346fdeba2b2d5f2eda878a3cf.png',
          text: '设置',
          action: () => this.navTo('/pages/setting/setting')
        }
      ]
    };
  },

  onLoad() {
    let newdata;
    try {
      const value = uni.getStorageSync('userInfo');
      console.log(value)
      if (value != null) {
        this.nickname = value.nickname
        this.account_user = value.accountNum
        this.password_user = value.password
      }
    } catch (e) {
      console.error(e);
    }
    this.getequipsinfo();
    console.log(this.account_user)

  },
  onShow() {
    this.init()
  },
  methods: {
    async init() {
      let data = {
        account_user: this.account_user,
        password_user: this.password_user
      }
      let res = await _getuserinfo(data);
      console.log(res.data);
      this.nickname = res.data.nickname_user
      this.headsculpture = res.data.photo_user
    },
    // 跳转链接
    navTo(url) {
      uni.navigateTo({
        url: url,
        success(res) {
          console.log('成功啦', res);
        },
        fail(err) {
          console.log('失败啦', err);
        }
      })
    },
    async getequipsinfo() {
      let data = {
        account_user: this.account_user
      }
      let res = await _getequiplistall(data)
      this.equips = res.data
      for (let i = 0; i < this.equips.length; i++) {
        let s = this.equips[i].workingtag_equip
        if (s == 'CONNECTED' || s == 'RUN' || s == 'ON' || s == 'STOP' || s == 'PULSE') {
          this.linknum++
        }

        if (s == 'RUN') {
          this.workingnum++
        }
      }
      console.log(this.equips)
    },

    clicklistitem1(data) {
      console.log(data);
      uni.setStorage({
        key: 'user',
        data: data
      });
      this.navTo('/pages/sharing/sharing')
    },

    previewImage() {
      if (!this.headsculpture) return;

      // 显示加载提示
      uni.showLoading({
        title: '加载中...'
      });

      // 预览图片
      uni.previewImage({
        current: this.headsculpture,
        urls: [this.headsculpture],
        indicator: 'default',
        loop: true,
        success: () => {
          uni.hideLoading();
        },
        error: () => {
          uni.hideLoading();
          uni.showToast({
            title: '图片加载失败',
            icon: 'none'
          });
        }
      });
    },
    navigateToUserProfile() {
      this.navTo('/pages/userinfo/userinfo');
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 40rpx;
}

.header {
  background: linear-gradient(180deg, #44cdbd 0%, #239f97 100%);
  //background: #44cdbd;
  padding: 120rpx 32rpx 80rpx;
}

.user-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 32rpx;
  margin-top: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  &:active {
    background-color: #ffffff;
  }
  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      border: 4rpx solid #fff;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      // 添加加载动画样式
      &.loading {
        animation: pulse 1.5s infinite;
      }
    }

    .info-content {
      flex: 1;
      margin-left: 24rpx;

      .nickname {
        font-size: 36rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 16rpx;
      }

      .stats {
        display: flex;
        align-items: center;

        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;

          .stat-value {
            font-size: 32rpx;
            color: #138f87;
            font-weight: 500;
          }

          .stat-label {
            font-size: 24rpx;
            color: #666;
            margin-top: 4rpx;
          }
        }

        .stat-divider {
          width: 2rpx;
          height: 40rpx;
          background: #eee;
          margin: 0 32rpx;
        }
      }
    }
  }
}

.quick-actions {
  margin: -40rpx 32rpx 0;
  padding: 24rpx 0;
  background: #fff;
  border-radius: 16rpx;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.25s;
    padding: 16rpx;
    flex: 1;
    margin: 0;
    border-radius: 0;

    &:active {
      background-color: #f0f0f0;
    }

    .action-icon {
      width: 64rpx;
      height: 64rpx;
      margin-bottom: 8rpx;
    }

    .action-text {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.menu-list {
  margin: 32rpx;

  .menu-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 0 32rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);

    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx;
      margin: 0 -32rpx;
      border-bottom: 1rpx solid #f5f5f5;
      transition: background-color 0.25s;

      &:active {
        background-color: #f0f0f0;
      }

      &:last-child {
        border-bottom: none;
      }

      .menu-content {
        display: flex;
        align-items: center;

        .menu-icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 24rpx;
        }

        .menu-text {
          font-size: 30rpx;
          color: #333;
        }
      }
    }
  }
}

// 添加头像加载动画
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .6;
  }
  100% {
    opacity: 1;
  }
}
</style>